<template>
  <div>
    <transition name="moveR1">
      <div v-if="isShow" v-show="isVisible" class="wrap">
        <!--标题-->
        <div class="fly_name">
          <span>{{ getType(title) }}</span>
          <svg-icon
            @click="isShowModule(false)"
            style="position: absolute; left: 30px; cursor: pointer"
            icon-class="shousuo_R"
          />
        </div>
        <!--rtk状态：1 定位解类型 2 是否就绪 3 是否开启 4 保险是否过期时间-->
        <div class="rtk_status_list">
          <li :title="'RTK解析类型:' + aircraftShow.rtkResolveType">
            <div>
              <span class="RTK_style">RTK</span>
              <span class="status_text">{{ aircraftShow.rtkResolveType }}</span>
            </div>
          </li>
          <li :title="aircraftShow.isRtkReady ? 'RTK可以使用' : 'RTK禁用使用'">
            <div style="margin-left: 10px">
              <svg-icon
                v-if="aircraftShow.isRtkReady"
                icon-class="check-circle-fill"
              />
              <svg-icon v-else icon-class="error" />
              <span v-if="aircraftShow.isRtkReady" class="status_text"
                >可用</span
              >
              <span v-else class="status_text">禁用</span>
            </div>
          </li>
          <li :title="aircraftShow.isRtkEnable ? 'RTK已开启' : 'RTK已关闭'">
            <div style="margin-left: 10px">
              <el-switch
                v-model="aircraftShow.isRtkEnable"
                style="width: 30px; padding: 0; pointer-events: none"
                active-color="#25F900"
                inactive-color="#ff4949"
              />

              <span v-if="aircraftShow.isRtkEnable" class="status_text"
                >开启</span
              >
              <span v-else class="status_text">关闭</span>
            </div>
          </li>
          <li :title="'保质期截止时间' + rtkDeadLine">
            <div
              style="
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: right;
                margin-left: 10px;
              "
            >
              <svg-icon
                icon-class="shield-keyhole-fill"
                style="width: 20px; height: 20px"
              />
              <span class="status_text">过期时间</span>
            </div>
          </li>
        </div>
        <!--方向速度-->
        <div class="fly_buz_wrap" style="flex: 8; height: 0">
          <div class="fly_direction_and_speed">
            <div class="fly_item">
              <span class="args">{{ aircraftShow.aircraftHeadDirection }}</span>
              <div class="icon_sprite_direction_bg">
                <div
                  class="direction_wrap"
                  :style="{ transform: `rotate(${aircraftHeadDirection}deg)` }"
                >
                  <i class="icon_sprite_direction_scope" />
                  <i class="icon_sprite_direction_drone" />
                </div>
              </div>
              <div>机头朝向</div>
            </div>
            <div class="fly_item">
              <span class="args">{{ aircraftShow.gimbalPitch }}</span>
              <div class="icon_sprite_ptz_bg">
                <div
                  class="ptz_wrap"
                  :style="{ transform: `rotate(${gimbalPitch}deg)` }"
                >
                  <i v-if="true" class="icon_sprite_ptz_scope" />
                  <i v-if="true" class="icon_sprite_ptz_drone" />
                  <i v-if="true" class="icon_sprite_ptz_drone2" />
                </div>
              </div>
              <div>云台角度</div>
            </div>
            <!--水平速度-->
            <div class="fly_item">
              <div id="main1" class="echart_gauge" />
              <div style="margin-top: -15px">水平速度</div>
            </div>
            <!--垂直速度-->
            <div class="fly_item">
              <div id="main2" class="echart_gauge" />
              <div style="margin-top: -15px">垂直速度</div>
            </div>
          </div>
          <div class="fly_title">
            <div class="fly_title_border">
              <span>方向速度</span>
            </div>
          </div>
        </div>
        <!--飞行参数-->
        <div class="fly_buz_wrap" style="flex: 11; height: 0">
          <div class="fly_args_num">
            <div class="flay_args_item">
              <div class="icon_sprite_height" />
              <div class="arg_title">离地高度：</div>
              <div class="arg_value">
                <template v-if="aircraftInfo && aircraftInfo.height_dem">
                  {{
                    aircraftInfo.height_dem
                      ? aircraftInfo.height_dem.toFixed(1)
                      : "N"
                  }}m
                </template>
                <template v-else> N </template>
              </div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_height" />
              <div class="arg_title">离巢高度：</div>
              <div class="arg_value">{{ aircraftShow.aircraftAltitude }}</div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_distance" />
              <div class="arg_title">离巢距离：</div>
              <div class="arg_value">
                {{ aircraftShow.distanceToHomePoint }}
              </div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_upload_signal" />
              <div class="arg_title">上传信号：</div>
              <div class="arg_value">
                {{ aircraftShow.aircraftUpLinkSignal }}
              </div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_download_signal" />
              <div class="arg_title">下载信号：</div>
              <div class="arg_value">
                {{ aircraftShow.aircraftDownLinkSignal }}
              </div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_satellite_num" />
              <div class="arg_title">卫星数量：</div>
              <div class="arg_value">{{ aircraftShow.satelliteCount }}</div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_fly_mode" />
              <div class="arg_title">飞行模式：</div>
              <div class="arg_value">{{ aircraftShow.flightMode }}</div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_compass_status" />
              <div class="arg_title">罗盘状态：</div>
              <div class="arg_value">{{ aircraftShow.isCompassError }}</div>
            </div>
            <div class="flay_args_item" v-if="false">
              <div class="icon_sprite_push_status" />
              <div class="arg_title">推流状态：</div>
              <div class="arg_value">{{ aircraftShow.isLiveStreaming }}</div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_signal_interference" />
              <div class="arg_title">信道干扰：</div>
              <div class="arg_value">
                {{ aircraftShow.avgFrequencyInterference }}
              </div>
            </div>
            <div class="flay_args_item">
              <div class="icon_sprite_trans_signal" />
              <div class="arg_title">图传信号：</div>
              <div class="arg_value">{{ aircraftShow.signalState }}</div>
            </div>
          </div>

          <div class="fly_title">
            <div class="fly_title_border">
              <span>飞行参数</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!--展开按钮-->
    <div v-show="!isVisible" class="showbtn" @click="isShowModule(true)">
      <svg-icon icon-class="shousuo_L" />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// MANUAL(手动)ATTI(姿态)GPS_ATTI(GPS) GPS_SPORT(运动) GPS_WAYPOINT(航点) AUTO_TAKEOFF(自主起 飞) AUTO_LANDING(自主降 落) GO_HOME(返航) JOYSTICK(虚拟摇杆) UNKNOWN(未知)

const allFlightMode = {
  MANUAL: "手动",
  ATTI: "姿态",
  GPS_ATTI: "GPS",
  GPS_SPORT: "运动",
  GPS_WAYPOINT: "航点",
  AUTO_TAKEOFF: "自主起飞",
  AUTO_LANDING: "自主降落",
  GO_HOME: "返航",
  JOYSTICK: "虚拟摇杆",
  UNKNOWN: "未知",
};
export default {
  name: "AircraftInfoComp",
  props: {
    isShow: {
      type: Boolean,
      default: () => true,
    },
    title: {
      type: String,
      default: () => "",
    },
    nestId: {
      type: String,
      default: () => "",
    },
    nestInfo: {
      type: Object,
      default: () => {},
    },
    nestHeight: {
      default: () => "",
    },
    nestlatitude: {
      default: () => "",
    },
    nestlongitude: {
      default: () => "",
    },
    aircraftInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      rtkDeadLine: "",
      value: true,
      myChart1: "",
      myChart2: "",
      //
      aircraftHeadDirection: 0,
      gimbalPitch: 0,
      isVisible: true,
      aircraftShow: "",
      demHeight: "",
      countNum: 0,
    };
  },
  watch: {
    nestInfo(val) {
      // this.nestInfo = val

      this.rtkDeadLine = val.aircraftDeadline;

      // 0 未推流1 推流 2  未起飞
    },
    nestHeight(val) {
      this.countNum = 0;
    },
    aircraftInfo(val) {
      // this.nestInfo = val
      // this.transform2ShowInfo(val)
      // this.setChartData()
      this.setData();
    },
    aircraftShow(val, oldVal) {
      var that = this;
      if (
        parseFloat(that.aircraftInfo.aircraftAltitude) == 0 ||
        parseFloat(that.aircraftInfo.aircraftAltitude) == null ||
        val.aircraftAltitude == "N"
      ) {
        if (val.aircraftAltitude != oldVal.aircraftAltitude) {
          // var cartographics = [
          //         Cesium.Cartographic.fromDegrees(
          //           that.nestlongitude,
          //          that.nestlatitude
          //         ),
          //       ];
          //       Cesium.sampleTerrain(viewer.terrainProvider, 12, cartographics).then(
          //         (updatedPositions) => {
          //           updatedPositions.forEach((pos, i) => {
          //             console.log(that.nestHeight,pos.height)
          //             if (that.nestHeight) {
          //       that.demHeight = parseInt((parseFloat(that.nestHeight) - parseFloat(pos.height)))+'m';
          //     } else {
          //       that.demHeight = "N";
          //     }
          //           });
          //         }
          //       );
        } else {
          that.countNum++;
          // if(that.countNum<2){
          //   var cartographics = [
          //         Cesium.Cartographic.fromDegrees(
          //           that.nestlongitude,
          //          that.nestlatitude
          //         ),
          //       ];
          //       Cesium.sampleTerrain(viewer.terrainProvider, 12, cartographics).then(
          //         (updatedPositions) => {
          //           updatedPositions.forEach((pos, i) => {
          //             console.log(that.nestHeight,pos.height)
          //             if (that.nestHeight) {
          //       that.demHeight = parseInt((parseFloat(that.nestHeight) - parseFloat(pos.height)))+'m';
          //     } else {
          //       that.demHeight = "N";
          //     }
          //           });
          //         }
          //       );
          // }
        }
      } else {
        var altitudeNum =
          parseFloat(that.nestHeight) + parseFloat(val.aircraftAltitude);
        // 计算相对地面高度
        var cartographics = [
          Cesium.Cartographic.fromDegrees(
            that.aircraftInfo.aircraftLocationLongitude,
            that.aircraftInfo.aircraftLocationLatitude
          ),
        ];
        Cesium.sampleTerrain(viewer.terrainProvider, 12, cartographics).then(
          (updatedPositions) => {
            updatedPositions.forEach((pos, i) => {
              // console.log(altitudeNum, pos.height);
              if (altitudeNum && pos.height) {
                that.demHeight =
                  parseInt(parseFloat(altitudeNum) - parseFloat(pos.height)) +
                  "m";
              } else {
                that.demHeight = "N";
              }
            });
          }
        );
      }
    },
  },
  mounted() {
    this.setDefaultData();
    this.initCharts();
    this.setData();
    this.$bus.on("showAircraftComp", (show) => {
      this.isShowModule(show);
    });
  },
  methods: {
    getType(title) {
      switch (title) {
        case "4":
          return "御 MAVIC 2 行业进阶版";
        case "5":
          return "经纬 MATRICE 300 RTK";
        case "17":
          return "御 MAVIC 进阶版";
        case "32":
          return "御 MAVIC 3";
        default:
          return title;
      }
    },
    setDefaultData() {
      this.aircraftShow = {
        aircraftHeadDirection: 0,
        gimbalPitch: 0,
        aircraftVSpeed: 0.0,
        aircraftHSpeed: 0.0,
        //
        aircraftAltitude: "N",
        distanceToHomePoint: "N",
        aircraftUpLinkSignal: "N",
        aircraftDownLinkSignal: "N",
        satelliteCount: "N",
        flightMode: "N",
        isCompassError: "N",
        isLiveStreaming: "N",
        avgFrequencyInterference: "N",
        signalState: "N",
        //
        isRtkEnable: false,
        isRtkReady: false,
        rtkResolveType: "未知",
      };
    },

    transform2ShowInfo(info) {
      console.log("transform2ShowInfo", info);
      // 设置动画
      // this.aircraftHeadDirection = info.aircraftHeadDirection
      // this.aircraftHeadDirection = 140 + this.aircraftHeadDirection
      this.aircraftHeadDirection = info ? info.aircraftHeadDirection : 0;
      this.gimbalPitch = info ? info.gimbalPitch : 0;
      // this.gimbalPitch = 70 + this.gimbalPitch
      // 设置状态

      // if (this.aircraftInfo.isAircraftConnected) {

      if (info && info.isAircraftConnected) {
        // if (true) {
        this.aircraftShow = {
          aircraftHeadDirection: info.aircraftHeadDirection.toFixed(0) + "°",
          gimbalPitch: info.gimbalPitch
            ? info.gimbalPitch.toFixed(0)
            : -45 + "°",
          aircraftVSpeed: Math.round(info.aircraftVSpeed * 10) / 10, //
          // aircraftVSpeed: info.aircraftVSpeed.toFixed(1), //
          // aircraftHSpeed: info.aircraftHSpeed.toFixed(1), //
          aircraftHSpeed: Math.round(info.aircraftHSpeed * 10) / 10, //
          aircraftAltitude: info.aircraftAltitude?.toFixed(0) + "m",
          distanceToHomePoint: info.distanceToHomePoint?.toFixed(0) + "m",
          aircraftUpLinkSignal: info.aircraftUpLinkSignal + "",
          aircraftDownLinkSignal: info.aircraftDownLinkSignal + "",
          satelliteCount: info.satelliteCount + "",
          flightMode: this.getFlightMode(info.flightMode),
          isCompassError: info.isCompassError ? "已关闭" : "工作中",
          isLiveStreaming: this.getLiveState(),
          avgFrequencyInterference:
            Math.round(info.avgFrequencyInterference * 10) / 10 + "dBm",
          signalState: this.getSingleState(info.signalState),
          isRtkEnable: info.isRtkEnable,
          isRtkReady: info.isRtkReady,
          rtkResolveType: this.getResolveType(info.positioningSolution),
        };
      } else {
        this.setDefaultData();
      }
    },
    getLiveState() {
      if (this.aircraftInfo.isAircraftConnected) {
        if (this.nestInfo.isLiveStreaming === 1) {
          return "推流中";
        } else if (this.nestInfo.isLiveStreaming === 0) {
          return "未推流";
        } else {
          return "未知";
        }
      } else {
        return "N";
      }
    },
    getSingleState(signalState) {
      switch (signalState) {
        case "GOOD":
          return "信号良好";
        case "MODERATE":
          return "信号一般";
        case "WEAK":
          return "信号微弱";
        case "UNKNOWN":
          return "状态未知";
        default:
          return "状态未知";
      }
    },
    // NONE(无) SINGLE_POINT(单点解) FLOAT(浮点解) FIXED_POINT(固定解) UNKNOWN(未知)
    getResolveType(key) {
      switch (key) {
        case "NONE":
          return "无";
        case "SINGLE_POINT":
          return "单点解";
        case "FLOAT":
          return "浮点解";
        case "FIXED_POINT":
          return "固定解";
        case "UNKNOWN":
          return "未知";
        default:
          return "状态未知";
      }
    },
    getFlightMode(flightMode) {
      return allFlightMode[flightMode];
    },
    initCharts() {
      const chartDom1 = document.getElementById("main1");
      this.myChart1 = echarts.init(chartDom1, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      //
      const chartDom2 = document.getElementById("main2");
      this.myChart2 = echarts.init(chartDom2, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
    },
    setData() {
      this.rtkDeadLine = this.nestInfo.aircraftDeadline;
      this.transform2ShowInfo(this.aircraftInfo);
      this.setChartData();
    },
    setChartData() {
      //
      const option1 = {
        // tooltip: {
        //   formatter: '{a} <br/>{b} : {c}%'
        // },
        series: [
          {
            name: "Pressure",
            color: {},
            type: "gauge",
            radius: "95%",
            min: 0,
            max: 90,
            splitNumber: 15,
            // startAngle:210,
            // endAngle:-30,
            progress: {
              show: true,
              width: 5,
              itemStyle: {
                color: "#18AAF2",
              },
            },
            pointer: {
              length: "75%",
              width: 2,
              color: "#18AAF2",
              // offsetCenter: [10, '5%']
            },
            // 文本
            detail: {
              fontSize: 10,
              color: "#aaa",
              show: true,
              valueAnimation: true,
              formatter: "{value}m/s",
              offsetCenter: [0, 20],
            },
            // 圆环宽度
            axisLine: {
              // roundCap:true,
              lineStyle: {
                width: 2,
                color: [
                  // [0, '#2CFAFC'],
                  [0.33, "#0074D9"],
                  [0.8, "#01FF70"],
                  [1, "#FF4136"],
                  // [1, '#0b275B'] // 底色
                ],
              },
            },
            axisLabel: { show: false, color: "#464646" },
            // 小刻度样式
            axisTick: {
              show: true,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            // 大刻度样式
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            data: [
              {
                value: this.aircraftShow.aircraftHSpeed,
                itemStyle: {
                  color: "#18AAF2",
                },
              },
            ],
          },
        ],
      };
      const option2 = {
        // tooltip: {
        //   formatter: '{a} <br/>{b} : {c}%'
        // },

        series: [
          {
            name: "Pressure",
            type: "gauge",
            radius: "95%",
            min: 0,
            max: 30,
            splitNumber: 15,
            // startAngle:210,
            // endAngle:-30,
            progress: {
              show: true,
              width: 5,
              itemStyle: {
                color: "#18AAF2",
              },
            },
            pointer: {
              length: "75%",
              width: 2,
              color: "#18AAF2",
              // offsetCenter: [10, '5%']
            },
            detail: {
              fontSize: 10,
              color: "#aaa",
              show: true,
              valueAnimation: true,
              formatter: "{value}m/s",
              offsetCenter: [0, 20],
            },
            axisLine: {
              // roundCap:true,
              lineStyle: {
                width: 2,
                color: [
                  // [0, '#2CFAFC'],
                  [0.33, "#0074D9"],
                  [0.8, "#01FF70"],
                  [1, "#FF4136"],
                  // [1, '#0b275B'] // 底色
                ],
              },
            },
            axisTick: {
              show: true,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: { show: false, color: "#464646" },
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            data: [
              {
                value: this.aircraftShow.aircraftVSpeed,
                itemStyle: {
                  color: "#18AAF2",
                },
              },
            ],
          },
        ],
      };
      //
      option1 && this.myChart1.setOption(option1);
      option2 && this.myChart2.setOption(option2);
    },
    isShowModule(val) {
      this.isVisible = val;
      this.$parent.resetVideoPosition(val);
    },
    getVisibleState() {
      return this.isVisible;
    },
  },
};
</script>

<style scoped lang="scss">
$text-color-white: #ffffff;
$text-color-grey: #aaa;
$text-color-blue: #18aaf2;
$text-color-light-blue: #40e0d0;

$border-color-grey: rgba(150, 150, 150, 0.5);
* {
  caret-color: transparent;
}

.moveR1-enter-active,
.moveR1-leave-active {
  transition: all 0.3s ease;
  transform: translateX(0);
}

.moveR1-enter,
.moveR1-leave {
  transform: translateX(200%);
}

.moveR1-leave-to {
  transform: translateX(200%);
}

.wrap {
  pointer-events: all;
  position: absolute;
  top: vh(60);
  right: 20px;
  height: vh(1000);
  padding: 5px;

  transition: all 0.5s;
  background: rgba(5, 29, 40, 0.8);
  color: $text-color-white;
  z-index: 999;
  box-sizing: border-box;
  width: 330px;
  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-radius: 35px 35px 0 0;

  //复用格式
  .fly_title {
    position: absolute;
    top: vh(-20);
    grid-column-start: 1;
    grid-column-end: 4;
    //margin: vh(14) 0;
    font-size: 12px;
    text-align: left;

    .fly_title_border {
      //background: rgba(5, 29, 40, 0.9) url('~@/assets/border/y1.png') no-repeat left;
      border: #20a0ff 1px solid;
      background: rgba(5, 29, 40, 0.9);
      padding: vh(10) 0;
    }

    span {
      color: $text-color-blue;
      background: url("~@/assets/small_title_bg.png") no-repeat center;

      background-size: 120px vh(12);
      padding: vh(15) 40px;
    }
  }

  .fly_buz_wrap {
    position: relative;
    width: 100%;
    margin-top: vh(28);
  }

  .icon_sprite_height {
    //background: url('~@/assets/sprite/sprite.png') no-repeat 1.527% 50%;
    background: url("~@/assets/sprite/sprite.png") no-repeat 1.527% 50%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_distance {
    background: url("~@/assets/sprite/sprite.png") no-repeat 3.13% 50%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_upload_signal {
    background: url("~@/assets/sprite/sprite.png") no-repeat 4.732% 50%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_download_signal {
    background: url("~@/assets/sprite/sprite.png") no-repeat 6.335% 50%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_satellite_num {
    background: url("~@/assets/sprite/sprite.png") no-repeat 7.893% 50.066%;
    background-size: 2016px 400px;
    width: 21px;
    height: 21px;
  }

  .icon_sprite_fly_mode {
    background: url("~@/assets/sprite/sprite.png") no-repeat 9.539% 50%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_compass_status {
    background: url("~@/assets/sprite/sprite.png") no-repeat 11.103% 50%;
    background-size: 2016px 400px;
    width: 21px;
    height: 21px;
  }

  .icon_sprite_push_status {
    background: url("~@/assets/sprite/sprite.png") no-repeat 12.766% 50.066%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  .icon_sprite_signal_interference {
    background: url("~@/assets/sprite/sprite.png") no-repeat 1.479% 58.388%;
    background-size: 2016px 400px;
    width: 21px;
    height: 16px;
  }

  .icon_sprite_trans_signal {
    background: url("~@/assets/sprite/sprite.png") no-repeat 3.13% 58.399%;
    background-size: 2016px 400px;
    width: 19px;
    height: 19px;
  }

  //-----------------------
  .fly_name {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    text-align: center;
    padding: 10px 0;
    background: linear-gradient(#044d86 50%, #033057 50%) no-repeat;
    position: relative;
  }

  .rtk_status_list {
    outline: none;
    border: $border-color-grey 1px solid;
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    list-style: none;

    .status_text {
      font-size: 14px;
      margin-left: 3px;
      padding-left: 0px;
    }

    .RTK_style {
      font-size: 14px;
      background-color: #25f900;
      color: black;
      border-radius: 4px;
      padding: 0 4px;
      min-height: 0px;
    }
  }

  .fly_direction_and_speed {
    height: 100%;
    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 24px 12px 12px 12px;
    background-size: 100% 100%;
    display: grid;
    //padding: 15px 10px;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 2px;
    grid-column-gap: 6px;
    //border: red 1px solid;
    overflow: auto;

    .fly_item {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: $text-color-grey;

      .args {
        position: absolute;
        bottom: 30px;
        background-color: rgba(5, 29, 40, 0.8);
        text-align: center;
        font-size: 12px;
        z-index: 88;
      }

      .icon_sprite_direction_bg {
        position: relative;
        background: url("~@/assets/sprite/sprite.png") no-repeat -1109px -14px;
        background-size: 2016px 400px;

        width: 104px;
        height: 104px;
        transform: scale(0.9);

        .direction_wrap {
          position: absolute;
          left: 50%;
          top: 50%;
          transition: transform 1s;

          .icon_sprite_direction_scope {
            background: url("~@/assets/sprite/sprite.png") no-repeat -1213px -14px;
            background-size: 2016px 400px;
            //width: 164px;
            width: 60px;
            height: 60px;
            z-index: 999;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -50px;
          }

          .icon_sprite_direction_drone {
            background: url("~@/assets/sprite/sprite.png") no-repeat -1235px -80px;
            background-size: 2016px 400px;
            width: 15px;
            height: 15px;
            z-index: 999;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -7.5px;
          }
        }
      }

      .dashboard {
        position: relative;

        .text {
          color: red;
          position: absolute;
          top: 50%;
          left: 50%;
        }
      }

      .echart_gauge {
        width: 93px;
        height: 93px;
      }
    }

    .icon_sprite_ptz_bg {
      position: relative;
      background: url("~@/assets/sprite/sprite.png") no-repeat -1109px -134px;
      background-size: 2016px 400px;
      //width: 164px;
      width: 104px;
      height: 104px;
      transform: scale(0.9);

      .ptz_wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transition: transform 1s;

        .icon_sprite_ptz_scope {
          background: url("~@/assets/sprite/sprite.png") no-repeat -1213px -14px;
          background-size: 2016px 400px;
          //width: 164px;
          width: 60px;
          height: 60px;
          z-index: 999;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50px;
          margin-top: -30px;
          transform: rotate(-90deg);
        }

        .icon_sprite_ptz_drone {
          background: url("~@/assets/sprite/sprite.png") no-repeat -1226px -212px;
          background-size: 2016px 400px;
          width: 25px;
          height: 15px;
          z-index: 999;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -12.5px;
          margin-top: -7.5px;
        }

        .icon_sprite_ptz_drone2 {
          background: url("~@/assets/sprite/sprite.png") no-repeat -1230px -180px;
          background-size: 2016px 400px;
          width: 19px;
          height: 20px;
          z-index: 999;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -3px;
          margin-top: -4px;
          transform: rotate(90deg);
        }
      }
    }
  }

  .fly_args_num {
    height: 100%;

    background: rgba(5, 29, 40, 0.9);
    background: no-repeat center url("~@/assets/border/y2.png");
    padding: 40px 12px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: auto;

    .flay_args_item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-left: 120px;

      .arg_title {
        color: $text-color-grey;
        margin-left: 12px;
      }

      .arg_value {
        color: $text-color-white;
        font-size: 18px;
      }
    }
  }
}

.showbtn {
  position: absolute;
  top: vh(70);
  right: 10px;
  height: 30px;
  width: 30px;
  background: rgba(15, 57, 102, 0.8);
  padding: 0 5px;
  border: 1px solid rgba(28, 193, 255, 0.6);
  font-size: 18px;
  line-height: 30px;
  color: #f4f4f5;
  cursor: pointer;
  z-index: 999;
  pointer-events: all;
}
</style>
